<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<center>
		<table>
			<tr>
				<td>
				<input type="text" name="city" id="city">
				<span id="scity"></span>
				</td>
			</tr>
		</table>
		<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</center>
</body>
</html>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(document).on("blur","#city",function(){
		//获取值
		var city=$("#city").val();
		// alert(city);
		var cscity=/^(\w|[\u4e00-\u9fa5])+$/;
		if(city=="")
		{
          $("#scity").html("<font color='red'>城市名不可以为空</font>");
          return;
		}
        else if(city.length>10)
		{
         $("#scity").html("<font color='red'>城市名不可以大于10字符</font>");
          return;
		}
		else if(!cscity.test(city))
		{
         $("#scity").html("<font color='red'>城市名必须为数字/字母/汉字</font>");
          return;
		}
		else
		{

			$.ajax({

			url:"tq.php",
			type:"post",
			data:{city:city},
			dataType:"json",
			success:function(res){
				var rlength=res.result.length;
				var xq=[];
				var wd=[];
				for (var i = 0; i <rlength; i++) {
					xq[i]=res.result[i].week;
					wd[i]=[parseInt(res.result[i].temp_low),parseInt(res.result[i].temp_high)];
				};
				// console.log(wd);


					var chart = Highcharts.chart('container', {
	    chart: {
	        type: 'columnrange', // columnrange 依赖 highcharts-more.js
	        inverted: true
	    },
	    title: {
	        text: '温度变化范围'
	    },
	    subtitle: {
	        text: city
	    },
	    xAxis: {
	        categories: xq
	    },
	    yAxis: {
	        title: {
	            text: '温度 ( °C )'
	        }
	    },
	    tooltip: {
	        valueSuffix: '°C'
	    },
	    plotOptions: {
	        columnrange: {
	            dataLabels: {
	                enabled: true,
	                formatter: function () {
	                    return this.y + '°C';
	                }
	            }
	        }
	    },
	    legend: {
	        enabled: false
	    },
	    series: [{
	        name: '温度',
	        data: wd
	    }]
	});

				}
			})

			}
		
	})

</script>